<template>
    <div>
        <div class="list-box">
          <div class="pannel-title">
                <div>漏洞管理</div>
                <span v-if="timer">上次更新时间：{{timer}}</span>
            </div>
            <div class="filter-box">
                <a-select v-model:value="filter.severity" @change="handleChange" style="width: 120px;margin-right:15px;">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option value="Low">低危</a-select-option>
                    <a-select-option value="Medium">中危</a-select-option>
                    <a-select-option value="High">高危</a-select-option>
                </a-select>
                <a-select v-model:value="filter.psId" @change="handleChange" style="width: 120px;margin-right:15px;">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="item in roleOptions" :key='item' :value="item.id">{{item.name}}</a-select-option>
                </a-select>
                <a-input-search v-model:value="filter.keywords" @search="handleChange" placeholder="请输入漏洞/脆弱点名称" style="width: 200px" />
                <!-- <a class="download-btn"><img src="@/assets/images/icon-download.png" /><span>下载</span></a> -->
            </div>
            <div class="data-table">
                <a-table
                    :columns="columns"
                    :row-key="(record) => record.id"
                    :data-source="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    @change="handleTableChange"
                >
                    <template #severity="{text}">
                        <a-tag color="#4687FF" v-if="text === 'Low'">低危</a-tag>
                        <a-tag color="#FFD966" v-else-if="text === 'Medium'">中危</a-tag>
                        <a-tag color="#FC890C" v-else-if="text === 'High'">高危</a-tag>
                    </template>
                    <template #vulnType="{text}">
                        <span>
                          <a-tag v-if="text === 'Sys'">系统漏洞</a-tag>
                          <a-tag v-else-if="text === 'App'">应用漏洞</a-tag>
                          <a-tag v-else>漏洞</a-tag>
                        </span>
                    </template>
                    <template #status="{text}">
                      <!-- <span v-if="roleId == 1"> -->
                        <span class="span-circle UnReported" v-if="text === 'UnReported'">未通报</span>
                        <span class="span-circle Reported" v-else-if="text === 'Reported'">已签收</span>
                        <span class="span-circle Handled" v-else-if="text === 'Handled'">已反馈</span>
                        <span class="span-circle Uploaded" v-if="text === 'Uploaded'">待确认</span>
                        <span class="span-circle Confirmed" v-if="text === 'Confirmed'">已完成</span>
                    </template>
                    <template #action="{record}">
                      <router-link style="margin-right:5px;" :to="{ path: '/bugMgmtDtl', query: { id: record.id } }">
                        <img title="查看详情" src="@/assets/images/cz-select.png"/>
                      </router-link>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>
<script>
import { Input, message, Modal, Select, Table, Tag } from "ant-design-vue";
import { useStore } from "vuex";
import { reactive, ref } from "@vue/reactivity";
import httpRequest from "@/util/httpRequest";
import Upload from "@/util/upload";
export default {
  components: {
    ASelect: Select,
    ASelectOption: Select.Option,
    AInputSearch: Input.Search,
    ATable: Table,
    ATag: Tag
  },
  setup() {
    const store = useStore();
    //text：页面头部面包屑的显示文字，isBack：是否显示页面头部返回按钮
    store.dispatch("setBreadcrumb", { text: "漏洞管理", isBack: false });
    const dataSource = ref([]);
    const columns = reactive([
      {
        title: "漏洞名称",
        dataIndex: "vulnName",
        key: "vulnName"
      },
      {
        title: "漏洞类型",
        dataIndex: "vulnType",
        key: "vulnType",
        slots: { customRender: "vulnType" }
      },
      {
        title: "漏洞等级",
        dataIndex: "severity",
        key: "severity",
        slots: { customRender: "severity" }
      },
      {
        title: "发现时间",
        dataIndex: "createTime",
        key: "createTime"
      },
      {
        title: "所属单位",
        dataIndex: "firmName",
        key: "firmName",
        slots: { customRender: "firmName" }
      },
      {
        title: "所属辖区",
        dataIndex: "psName",
        key: "psName",
        slots: { customRender: "psName" }
      },
      {
        title: "操作",
        key: "action",
        slots: { customRender: "action" },
        align: "right"
      }
    ]);
    const filter = reactive({
      severity: "",
      psId: "",
      keywords: ""
    });
    const pagination = reactive({
      current: 1,
      pageSize: 10,
      total: 0,
      showTotal: (total) => `共计：${total}个漏洞`
    });
    const download = id => {
      console.log(id);
    };
    const roleId = JSON.parse(localStorage.getItem("roleId"));
    console.log(roleId);
    const roleOptions = JSON.parse(localStorage.getItem("roleOptions"));
    // const roleOptions = [{name:'全部',id:''}];
    return {
      roleId,
      filter,
      pagination,
      dataSource,
      columns,
      download,
      roleOptions
    };
  },
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.isLoading = true;
      httpRequest
        .post("漏洞列表", { ...this.filter, pageNo: this.pagination.current })
        .then(res => {
          this.dataSource = res.data.list;
          this.timer =
            this.dataSource.length > 0
              ? this.dataSource[0].createTime
              : null;
          this.pagination.total = res.data.total;
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    handleTableChange(page) {
      this.pagination.current = page.current;
      this.getList();
    },
    tongbao(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认进行此操作？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Reported", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    chuli(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认处理此漏洞操作？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Handled", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    upload(item) {
      Upload.Single({}, () => {
        item.loading = true;
      }).then(res => {
        console.log(res);
        httpRequest
          .post("处理漏洞", {
            id: item.id,
            status: "Uploaded",
            reportFile: res.data.url
          })
          .then(() => {
            this.getList();
          })
          .finally(() => {
            item.loading = false;
          });
      });
    },
    sure(id) {
      Modal.confirm({
        title: "系统提示",
        content: "确认进行此操作？",
        okText: "确认",
        cancelText: "取消",
        onOk: () => {
          return new Promise(res => {
            httpRequest
              .post("处理漏洞", { id, status: "Confirmed", reportFile: "" })
              .then(() => {
                message.success("操作成功！");
                this.getList();
              })
              .finally(() => {
                res();
              });
          });
        }
      });
    },
    handleChange() {
      this.pagination.current = 1;
      this.getList();
    }
  }
};
</script>
<style lang="less" scoped>
.filter-box {
  .download-btn {
    float: right;
  }
}
.span-circle {
  display: flex;
  align-items: center;
  &:before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    margin-right: 5px;
  }
  &.UnReported:before {
    background: #fe4e50;
  }
  &.Reported:before {
    background: #fcac2e;
  }
  &.Handled:before {
    background: #4687ff;
  }
  &.Uploaded:before {
    background: #15d8bf;
  }
  &.Confirmed:before {
    background: #14ce79;
  }
}
.cz-btn {
  font-size: 14px;
  color: #fff;
  padding: 0px 4px;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  vertical-align: top;
  margin-right: 5px;
  border: none;
  img {
    margin-right: 3px;
  }
  &.bgc1 {
    background: #fe4e50;
  }
  &.bgc2 {
    background: #fcac2e;
  }
  &.bgc3 {
    background: #4687ff;
  }
  &.bgc4 {
    background: #15d8bf;
  }
  &.bgc5 {
    background: #3ffc2e77;
    color: rgb(141, 141, 141);
  }
  &.bgc6 {
    background: #bab9dd;
    color: rgb(248, 248, 248);
  }
}
</style>
